const path = require("path");
const webpack = require("webpack");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const copyWebpackPlugin = require("copy-webpack-plugin");

class MyPlugin {
    apply(compiler) {
        compiler.hooks.emit.tap("MyPlugin", compilation => {
            for (const name in compilation.assets) {
                console.log(name);
                if (name.endsWith(".js")) {
                    const contents = compilation.assets[name].source();
                    const withoutComments = contents.replace(/\/\*\*+\*\//g, "");
                    compilation.assets[name] = {
                        source: () => withoutComments,
                        size: () => withoutComments.length,
                    };
                }
            }
        });
    }
}

module.exports = (env, argv) => {
    const config = {
        mode: "development", // production development
        entry: "./src/main.js", // 入口文件
        output: {
            // 输出配置
            filename: "bundle.js",
            path: path.join(__dirname, "output"),
        },
        module: {
            rules: [
                {
                    test: /.css$/,
                    use: ["style-loader", "css-loader"],
                },
                {
                    test: /.jpg$/,
                    use: {
                        loader: "url-loader",
                        options: {
                            limit: 10 * 1024,
                        },
                    },
                },
                {
                    test: /.js$/,
                    use: {
                        loader: "babel-loader",
                        options: {
                            presets: ["@babel/preset-env"],
                        },
                    },
                    exclude: /node_modules/,
                },
                {
                    test: /.html$/,
                    use: {
                        loader: "html-loader",
                        options: {
                            attrs: ["img:src", "a:href"],
                        },
                    },
                    exclude: path.join(__dirname, "./src/base.html"),
                },
                {
                    test: /.md$/,
                    use: "./markdown-loader",
                },
            ],
        },
        plugins: [
            new HtmlWebpackPlugin({
                title: "webpack plugin Sample",
                meta: {
                    viewport: "width=device-width",
                },
                template: "./src/base.html",
            }),
            new MyPlugin(),
            new webpack.HotModuleReplacementPlugin(),
        ],
        devtool: "source-map",
        devServer: {
            hot: true,
            contentBase: ["./public"], // 开发阶段不建议把静态资源跟着代码的改变打包，所以在这里指定静态文件的目录，这样就可以在开发阶段使用静态文件了
            proxy: {
                "/api": {
                    target: "https://api.github.com",
                    pathRewrite: {
                        "^/api": "",
                    },
                    changeOrigin: true,
                },
            },
        },
    };

    if (env === 'production') {
        config.mode = 'production'
        config.devtool = false
        config.plugins = [
            ...config.plugins,
            new CleanWebpackPlugin(),
            new copyWebpackPlugin({patterns:['public']}),
        ]
    }

    return config
};
